<template>
  <view class="points-detail-page">
    <!-- 积分总览 -->
    <view class="points-summary section">
      <view class="points-info">
        <view class="points-number">{{ totalPoints }}</view>
        <view class="points-label">当前积分</view>
      </view>
      <view class="points-actions">
        <button class="btn-primary" @tap="goToMall">去商城兑换</button>
      </view>
    </view>

    <!-- 筛选器 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index"
          class="filter-tab"
          :class="{ 'active': currentFilter === tab.value }"
          @tap="changeFilter(tab.value)"
        >
          {{ tab.label }}
        </view>
      </view>
    </view>

    <!-- 积分记录列表 -->
    <view class="records-list">
      <view 
        v-for="(record, index) in filteredRecords" 
        :key="index"
        class="record-item card fade-in"
      >
        <view class="record-header flex-between">
          <view class="record-title">{{ record.title }}</view>
          <view class="record-points" :class="record.type === 'earn' ? 'text-success' : 'text-warning'">
            {{ record.type === 'earn' ? '+' : '-' }}{{ record.points }}
          </view>
        </view>
        <view class="record-desc text-light">{{ record.description }}</view>
        <view class="record-time text-lighter">{{ record.time }}</view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredRecords.length === 0" class="empty-state">
      <view class="empty-icon">📊</view>
      <view class="empty-text">暂无积分记录</view>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more" @tap="loadMore">
      <text>加载更多</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const totalPoints = ref(1250)
const currentFilter = ref('all')
const hasMore = ref(true)

const filterTabs = ref([
  { label: '全部', value: 'all' },
  { label: '获得', value: 'earn' },
  { label: '消费', value: 'spend' }
])

const pointsRecords = ref([
  {
    id: 1,
    title: '回收订单完成',
    description: '成功回收废品，获得积分奖励',
    points: 50,
    type: 'earn',
    time: '2024-01-15 14:30'
  },
  {
    id: 2,
    title: '兑换星巴克咖啡券',
    description: '使用积分兑换50元星巴克咖啡券',
    points: 1500,
    type: 'spend',
    time: '2024-01-14 10:20'
  },
  {
    id: 3,
    title: '新用户注册奖励',
    description: '完成注册获得新用户奖励积分',
    points: 100,
    type: 'earn',
    time: '2024-01-13 16:45'
  },
  {
    id: 4,
    title: '每日签到',
    description: '连续签到7天获得额外积分',
    points: 20,
    type: 'earn',
    time: '2024-01-12 09:15'
  },
  {
    id: 5,
    title: '兑换代金券',
    description: '使用积分兑换30元代金券',
    points: 300,
    type: 'spend',
    time: '2024-01-11 15:30'
  }
])

const filteredRecords = computed(() => {
  if (currentFilter.value === 'all') {
    return pointsRecords.value
  }
  return pointsRecords.value.filter(record => record.type === currentFilter.value)
})

const changeFilter = (filter) => {
  currentFilter.value = filter
}

const goToMall = () => {
  uni.switchTab({
    url: '/pages/mall/mall'
  })
}

const loadMore = () => {
  // 模拟加载更多数据
  uni.showLoading({
    title: '加载中...'
  })
  
  setTimeout(() => {
    // 这里可以添加更多数据
    hasMore.value = false
    uni.hideLoading()
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    })
  }, 1000)
}

onMounted(() => {
  // 页面加载时的初始化操作
  console.log('积分明细页面加载完成')
})
</script>

<style lang="scss" scoped>
.points-detail-page {
  min-height: 100vh;
  background: var(--bg-color);
  padding-bottom: 120rpx;
}

.points-summary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 48rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  border-radius: 0 0 32rpx 32rpx;
}

.points-info {
  text-align: left;
}

.points-number {
  font-size: 72rpx;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8rpx;
}

.points-label {
  font-size: 28rpx;
  opacity: 0.9;
}

.points-actions {
  .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 2rpx solid rgba(255, 255, 255, 0.3);
    font-size: 28rpx;
    padding: 16rpx 32rpx;
  }
}

.filter-section {
  padding: 32rpx;
  background: white;
  margin-bottom: 24rpx;
}

.filter-tabs {
  display: flex;
  background: var(--bg-color);
  border-radius: 12rpx;
  padding: 8rpx;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: var(--text-light);
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
}

.records-list {
  padding: 0 32rpx;
}

.record-item {
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.record-header {
  margin-bottom: 16rpx;
}

.record-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color);
}

.record-points {
  font-size: 36rpx;
  font-weight: bold;
}

.record-desc {
  font-size: 28rpx;
  margin-bottom: 12rpx;
  line-height: 1.5;
}

.record-time {
  font-size: 24rpx;
}

.empty-state {
  text-align: center;
  padding: 120rpx 32rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 32rpx;
  color: var(--text-light);
}

.load-more {
  text-align: center;
  padding: 32rpx;
  color: var(--text-light);
  font-size: 28rpx;
}
</style>